<template>
  <div>
    <div v-if="visible" class="custom-dialog-mask">
      <div class="custom-dialog-container">
        <div class="dialog-header">
          <h3 class="dialog-title">{{ title }}</h3>
          <img src="../assets/img/module5/dialog/guanbi.png" @click="closeDialog" class="close-icon" />
        </div>

        <div class="dialog-content">
          <!-- 航路名称 -->
          <div class="info-row">
            <span class="label">航路名称：</span>
            <span class="value">{{ selectedObject }}</span>
          </div>

          <!-- 时间段 -->
          <div class="info-row">
            <span class="label">当前时间段：</span>
            <span class="value">{{ formattedStartTime }} 至 {{ formattedEndTime }}</span>
          </div>

          <!-- 预计持续时间段 -->
          <div class="info-row">
            <span class="label">预计持续时间段：</span>
            <span class="value">30 min</span>
          </div>

          <!-- 可滚动表格 -->
          <div class="scroll-table">
            <el-table :data="routes" height="200" style="width: 100%" class="route-table">
              <el-table-column prop="name" label="航路" width="150" align="center" header-align="center">
                <template #default="{ row }">
                  <span class="route-name">{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="调整时间段" width="150" align="center" header-align="center">
                <template #default="{ row }">
                  <span>{{ formatTimeRange(row.startTime, row.endTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="capacity" label="容量系数" width="120" align="center" header-align="center">
                <template #default="{ row }">
                  <span class="capacity-value">{{ row.capacity }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="interval" label="间隔系数" align="center" header-align="center">
                <template #default="{ row }">
                  <span class="interval-value">{{ row.interval }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 评估信息 -->
          <div class="assessment-section">
            <div class="assessment-title">评估指标：</div>
            <div class="metrics-grid">
              <div class="metric-item" v-for="metric in metrics" :key="metric.name">
                <span class="metric-label">{{ metric.name }}</span>
                <div class="metric-value">
                  <span class="percentage" :class="{ 'up': metric.trend === 'up', 'down': metric.trend === 'down' }">
                    {{ metric.value }}%
                  </span>
                  <span class="trend" :class="{ 'up': metric.trend === 'up', 'down': metric.trend === 'down' }">
                    {{ metric.trend === 'up' ? '↑' : '↓' }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="dialog-actions">
            <button class="diaButton" @click="closeDialog">取消</button>
            <button class="diaButton" @click="handleConfirm">应用</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    selectedObject: String,
    selectedStartTime: String,
    selectedEndTime: String
  },
  data() {
    return {
      routes: [
        {
          name: "黑沙滩巡查-黑沙滩巡查1",
          capacity: 1.2,
          interval: 3.5,
          startTime: "2025-04-08T14:00:00",
          endTime: "2025-04-08T15:30:00"
        },
        {
          name: "黑沙滩巡查-黑沙滩巡查2",
          capacity: 1.0,
          interval: 2.8,
          startTime: "2025-04-08T14:00:00",
          endTime: "2025-04-08T15:30:00"
        },
        {
          name: "黑沙滩巡查-黑沙滩巡查3",
          capacity: 1.5,
          interval: 4.2,
          startTime: "2025-04-08T14:00:00",
          endTime: "2025-04-08T15:30:00"
        },
        {
          name: "黑沙滩巡查-黑沙滩巡查4",
          capacity: 0.9,
          interval: 2.5,
          startTime: "2025-04-08T14:00:00",
          endTime: "2025-04-08T15:30:00"
        },
        {
          name: "黑沙滩巡查-黑沙滩巡查5",
          capacity: 1.3,
          interval: 3.8,
          startTime: "2025-04-08T14:00:00",
          endTime: "2025-04-08T15:30:00"
        }
      ],
      metrics: [
        { name: "空域安全", value: 85, trend: "up" },
        { name: "运行效率", value: 92, trend: "up" },
        { name: "经济成本", value: 78, trend: "down" },
        { name: "空域利用率", value: 88, trend: "up" }
      ]
    };
  },
  computed: {
    formattedStartTime() {
      return this.selectedStartTime?.replace("T", " ") || "";
    },
    formattedEndTime() {
      return this.selectedEndTime?.replace("T", " ") || "";
    }
  },
  methods: {
    closeDialog() {
      this.$emit("update:visible", false);
    },
    handleConfirm() {
      this.closeDialog();
      this.$message.success("管控策略已应用");
    },
    formatTimeRange(start, end) {
      if (!start || !end) return "";
      const format = (time) => {
        const date = new Date(time);
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${hours}:${minutes}`;
      };
      return `${format(start)} - ${format(end)}`;
    }
  }
};
</script>

<style scoped>
.custom-dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-dialog-container {
  width: 600px;
  background: url("../assets/img/module5/dialog/container.png") no-repeat;
  background-size: 100% 100%;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: url("../assets/img/module5/dialog/headbar.png") no-repeat;
  background-size: cover;
  height: 50px;
}

.dialog-title {
  color: #fff;
  font-size: 18px;
  margin: 0;
}

.close-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.dialog-content {
  padding: 20px;
}

.info-row {
  display: flex;
  margin: 12px 0;
  font-size: 14px;
}

.label {
  color: #87b7da;
  width: 150px;
}

.value {
  color: #fff;
  flex: 1;
}

.scroll-table {
  margin: 20px 0;
  height: 200px;
}

.route-table::v-deep .el-table__body-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #03498f rgba(0, 24, 47, 0.8);
}

.route-table::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
}

.route-table::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #03498f;
  border-radius: 4px;
}

.assessment-section {
  margin-top: 20px;
}

.assessment-title {
  color: #87b7da;
  font-size: 16px;
  margin-bottom: 15px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(0, 40, 77, 0.6);
  border-radius: 4px;
}

.metric-label {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.metric-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.percentage {
  color: #fff;
  font-weight: bold;
}

.trend {
  font-size: 14px;
}

.up {
  color: #67c23a;
}

.down {
  color: #f56c6c;
}

.dialog-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.diaButton {
  height: 30px;
  width: 120px;
  border: none;
  color: white;
  font-size: 18px;
  background-color: transparent;
  background-image: url('../assets/img/module2/button-tijiao.png');
  background-size: 100% 100%;
  cursor: pointer;
}

.diaButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}
</style>